<script setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
import {deleteSalary, getSalariesList} from "@/api/salary.js";

const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(100);

const handleCurrentChange = async (page) => {
  formData.value.page = page;
  // 在这里可以触发数据加载逻辑
  console.log('当前页码:', page);
  const result = await getSalariesList(formData.value)
  if (result.code === 200) {
    salaryList.value = result.data.records;
    total.value = result.data.total;
    currentPage.value = result.data.current;
    pageSize.value = result.data.size;
  }
};

const salaryList = ref([]);

const thisUsername = ref(JSON.parse(localStorage.getItem('userInfo')).username)

const formData = ref({
  page: 1,
  size: 5,
  username: thisUsername.value
})

const exportSalary = () => {
  const csvContent = "data:text/csv;charset=utf-8," + salaryList.value.map(item => {
    return `${item.name},${item.month},${item.amount},${item.remark}`;
  }).join("\n");
  const encodedUri = encodeURI(csvContent);
  const link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "salary.csv");
  document.body.appendChild(link);
  link.click();
}

const props = defineProps({
  username: {
    type: String,
    default: '',
    required: false
  }
});

onMounted(async () => {
  console.log(thisUsername.value)
  formData.value.username = thisUsername.value
  console.log('props:', typeof props.username)
  if (props.username !== undefined && props.username !== '' && props.username !== null) {
    formData.value.username = props.username;
  }
  console.log(formData.value)
  const result = await getSalariesList(formData.value)
  if (result.code === 200) {
    salaryList.value = result.data.records;
    total.value = result.data.total;
    pageSize.value = result.data.size;
  }
});

const handleDelete = async (salaryId) => {
  await deleteSalary(salaryId)
  const result = await getSalariesList(formData.value)
  if (result.code === 200) {
    salaryList.value = result.data.records;
    total.value = result.data.total;
    currentPage.value = result.data.current;
    pageSize.value = result.data.size;
  }
}

</script>

<template>
  <div>
    <el-table :data="salaryList" :border="true" style="height: 200px">
      <el-table-column prop="baseSalary" label="基本工资"></el-table-column>
      <el-table-column prop="bonus" label="绩效奖金"></el-table-column>
      <el-table-column prop="deductions" label="扣款"></el-table-column>
      <el-table-column prop="netSalary" label="实发工资"></el-table-column>
      <el-table-column prop="payDate" label="发放日期"></el-table-column>
      <el-table-column label="操作" v-if="username !== ''">
        <template #default="scope">
          <el-button type="danger" @click="handleDelete(scope.row.salaryId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px; text-align: center">
      <el-pagination
          :page-size="pageSize"
          :total="total"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
      />
    </div>
  </div>
</template>

<style scoped>

</style>
